<template>
    <div class="sceneTool">
        <div
            style="pointer-events: auto;background-color: #181818;display: flex;align-items: center;border-radius: 3px; padding: 8px 5px;">
            <!-- 平移按钮 -->
            <el-button size="small" :type="emitEditor.mode === '平移' ? 'primary' : 'default'" @click="emitEditor.mode = '平移'" icon="ArrowRight" style="margin: 0 2px;">平移</el-button>
            <!-- 旋转按钮 -->
            <el-button size="small" :type="emitEditor.mode === '旋转' ? 'primary' : 'default'" @click="emitEditor.mode = '旋转'" icon="RefreshRight" style="margin: 0 2px;">旋转</el-button>
            <!-- 缩放按钮 -->
            <el-button size="small" :type="emitEditor.mode === '缩放' ? 'primary' : 'default'" @click="emitEditor.mode = '缩放'" icon="ZoomIn" style="margin: 0 2px;">缩放</el-button>

            <div style="border-left: 1px solid #444; height: 20px; margin: 0 8px;"></div>
            <!-- 选中按钮 -->
            <el-button size="small" :type="emitEditor.mode === '选中' ? 'primary' : 'default'" @click="emitEditor.mode = '选中'" icon="Select" style="margin: 0 2px;">选中</el-button>
            <!-- 根级按钮 -->
            <el-button size="small" :type="emitEditor.mode === '根选择' ? 'primary' : 'default'" @click="emitEditor.mode = '根选择'" icon="Menu" style="margin: 0 2px;">根选择</el-button>
            <!-- 预览按钮 -->
            <el-button size="small" :type="emitEditor.mode === '预览' ? 'primary' : 'default'" @click="emitEditor.mode = '预览'" icon="View" style="margin: 0 2px;">预览</el-button>

            <div style="border-left: 1px solid #444; height: 20px; margin: 0 8px;"></div>
            <!-- 聚焦按钮 -->
            <el-button size="small" @click="focusToCenter" type="default" icon="FullScreen" style="margin: 0 2px;">聚焦</el-button>
            <!-- 墙绘制按钮 -->
            <el-button size="small" @click="toggleWallCreationMode" :type="emitEditor.mode === '墙绘制' ? 'primary' : 'default'" icon="EditPen" style="margin: 0 2px;">墙绘制</el-button>
        </div>
    </div>
</template>
<script setup>
import {watch} from "vue";
import * as THREE from 'three'
import {createGsapAnimation} from 'three-editor-cores'

const props = defineProps(['emitEditor'])
const emitEditor = props.emitEditor;

// 聚焦到场景中心点
function focusToCenter() {
    if (!emitEditor.threeEditor) return;
    const {camera, controls} = emitEditor.threeEditor;
    // 定义中心点位置（原点）
    const centerPoint = new THREE.Vector3(0, 0, 0);
    // 计算合适的相机位置，让场景中心在视野中
    const distance = 10; // 进一步减小相机距离中心点的距离，使视角更贴近中心点
    const cameraPosition = new THREE.Vector3(distance, distance * 0.5, distance);
    // 使用动画平滑移动相机和控制器目标
    createGsapAnimation(camera.position, cameraPosition);
    createGsapAnimation(controls.target, centerPoint);
}

// 切换墙绘制模式
function toggleWallCreationMode() {
    if (!emitEditor.threeEditor) return;
    // 调用scene组件中的墙绘制模式切换函数
    if (emitEditor.toggleWallCreationMode) {
        emitEditor.toggleWallCreationMode();
    }
    // 更新模式状态
    emitEditor.mode = emitEditor.mode === '墙绘制' ? '平移' : '墙绘制';
}

watch(() => emitEditor.mode, (v, o) => {
    // 确保threeEditor存在
    if (!emitEditor.threeEditor) return;
    // 处理从变换模式切换到其他模式的情况
    if (o && (o === '平移' || o === '旋转' || o === '缩放') && v && v !== '平移' && v !== '旋转' && v !== '缩放') {
        // 分离transformControls，确保不再控制任何对象
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.detach();
        }
    }
    // 根据新模式设置对应的功能
    if (v === '选中') {
        emitEditor.threeEditor.handler.mode = '选择';
    } else if (v === '根级') {
        emitEditor.threeEditor.handler.mode = '根选择';
    } else if (v === '平移') {
        emitEditor.threeEditor.handler.mode = '变换';
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.setMode('translate');
        }
    } else if (v === '旋转') {
        emitEditor.threeEditor.handler.mode = '变换';
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.setMode('rotate');
        }
    } else if (v === '缩放') {
        emitEditor.threeEditor.handler.mode = '变换';
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.setMode('scale');
        }
    } else if (v === '预览') {
        emitEditor.threeEditor.handler.mode = '点击信息';
        // 预览模式下，确保transformControls被分离
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.detach();
        }
    } else if (v === '聚焦') {
        // 聚焦模式下，确保transformControls被分离
        if (emitEditor.threeEditor.transformControls) {
            emitEditor.threeEditor.transformControls.detach();
        }
    }
})
</script>
<style lang="less" scoped>
.sceneTool {
    width: 100%;
    position: fixed;
    top: 50px;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
</style>
